<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>系统设置</BreadcrumbItem>
      <BreadcrumbItem>权限设置</BreadcrumbItem>
    </Breadcrumb>
    <Button style="margin-bottom:20px;margin-top: 24px;" v-hasPermission="['38']" class="button" size="small"
            type="primary" @click="changeUserMsg('',2)">添加角色身份
    </Button>
    <Button style="margin-bottom:20px;margin-top: 24px;visibility: hidden;">添加</Button>
    <div class="form_box">
      <Table ref="selection" :columns="columns1" :data="tableData" :loading="loading">
        <!-- 用户状态/备注 -->
        <template slot-scope="{ row }" slot="status">
          <span class="success" v-if="row.status==='1'">启用中</span>
          <span class="error" v-if="row.status==='2'">已被禁用</span>
        </template>
        <!-- 用户状态/备注 -->
        <template slot-scope="{ row }" slot="do">
          <Button class="button" size="small" v-hasPermission="['38']" type="info" @click="changeUserMsg(row,1)">编辑
          </Button>
          <Button class="button" size="small" v-hasPermission="['38']" type="error" @click="delItem(row)">删除</Button>
          <Button class="button" size="small" v-hasPermission="['38']" :type="row.status === 2?'success':'error' "
                  @click="stopOrBegin(row)">
            <span v-if="row.status === 1">禁用</span>
            <span v-else>启用</span>
          </Button>
          <Button class="button" size="small" v-hasPermission="['38']" type="info" @click="gotoAllpower(row)">权限管理
          </Button>
        </template>
      </Table>
    </div>
    <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20"
          :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
          @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>
    <!-- 修改,添加用户模态框 -->
    <Modal v-model="addUserOrChange" :mask-closable="false" :footer-hide="true" :title="title">
      <Form ref="addformInline" :label-width="200" :model="addformInline" inline>
        <FormItem label="身份名称">
          <Input v-model="addformInline.title" placeholder="请输入身份名称" style="width: 200px"/>
        </FormItem>
        <FormItem label="备注">
          <Input type="textarea" :rows="3" v-model="addformInline.remarks" placeholder="请输入备注"
                 style="width: 200px"/>
        </FormItem>
      </Form>
      <div class="addBalanceFooter">
        <Button class="cancelAddBalance" @click="cancelAddBalance">取消</Button>
        <Button type="primary" @click="addBalanceOk">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_id: JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id,
      type: "",
      title: "",
      request: {
        page: 1
      },
      addUserOrChange: false, //模态框
      columns1: [
        {
          title: "权限身份",
          key: "title",
          minWidth: 120,
          align: "center",

        },
        {
          title: "添加时间",
          key: "create_time",
          align: "center",
          minWidth: 180
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
          minWidth: 150
        },
        {
          title: "备注",
          key: "remarks",
          align: "center",
          minWidth: 150
        },
        {
          title: "操作",
          slot: "do",
          align: "center",
          minWidth: 300
        }
      ],
      tableData: [],
      addformInline: {
        title: "",
        status: "1",
        remarks: ""
      },
      checkAllGroup: [],
      page: {},
    };
  },
  created() {
    this.getRolelist();

  },
  methods: {
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.request.page = val;
      this.lists();
    },
    //去权限分配页面
    gotoAllpower(row) {
      this.$router.push({
        path: "/permission/allpower",
        query: {
          id: row.id,
          name: row.title
        }
      });
    },
    //获取角色列表
    getRolelist() {
      this.loading = true;
      this.axios.post("role/roleList", this.request).then(res => {
        if (res.code === 1) {
          this.loading = false;
          this.tableData = res.data.list;
          this.page.count = res.data.count; // 总条数
          this.page.curPage = res.data.curPage; // 当前页
          this.page.countPage = res.data.countPage; // 总页数
        }
      });
    },

    //添加或者修改
    changeUserMsg(item, type) {
      console.log("现在的type", type);
      this.type = type;
      if (type === 1) {
        this.title = "编辑";
        this.addformInline.title = item.title;
        this.addformInline.id = item.id;
        this.addformInline.remarks = item.remarks;
        this.addUserOrChange = true;
      } else if (type === 2) {
        if (this.addformInline.id) {
          this.addformInline.id = null;
        }

        this.title = "添加";
        this.$Modal.confirm({
          title: "确定要添加角色？",
          onOk: () => {
            this.addUserOrChange = true;
          },
          onCancel: () => {
          }
        });
      }
    },
    //删除角色信息
    delItem(row) {
      this.$Modal.confirm({
        title: `提示`,
        content: '确定删除角色:“' + row.title + '”吗？',
        onOk: () => {
          this.axios.post('role/roleDel', {id: row.id}).then(res => {
            if (res.code === 1) {
              this.$Message.success("删除成功");
              this.getlist();
            }
          })

        },
        onCancel: () => {
        }
      });
    },
    // 添加角色/修改
    addBalanceOk() {
      var url = this.type === 1 ? 'role/role/roleEdit' : 'role/roleAdd';
      this.axios.post(url, this.addformInline).then(res => {
        if (res.code === 1) {
          this.getlist();
          this.clearinput();
          this.$Message.success(`操作成功`);
        }
      })
    },
    cancelAddBalance() {
      this.addUserOrChange = false;
      console.log("关闭弹框");
    },
    //停止或者启用
    stopOrBegin(row) {

      var type = row.status;

      this.$Modal.confirm({
        title: `提示`,
        content: "确定要" + (type === 2 ? "启用" : "禁用") + "角色:“" + row.title + "”吗？",
        onOk: () => {
          this.axios.post("role/roleStatus", {id: row.id, status: type === 1 ? 2 : 1}).then(res => {
            if (res.code === 1) {
              this.$Message.success("操作成功");
              this.getlist();
            }
          });

        },
        onCancel: () => {
        }
      });
    },
    //清空输入框
    clearinput() {
      this.addUserOrChange = false;
      this.addformInline.title = "";
      this.addformInline.remarks = "";
    }
  }
};
</script>

<style scoped>
.button {
  margin-right: 3px;
}

.addBalanceFooter {
  display: flex;
  justify-content: center;
}

.cancelAddBalance {
  margin-right: 40px;
}

/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* 火狐 */
input {
  -moz-appearance: textfield;
}
</style>
